[CSS] 해당 Contents의 앞, 뒤에 특정 문장 삽입하기, content

CSS를 사용하여 콘텐츠를 추가하는 방법에 대하여 알아봅니다.


텍스트 또는 기호 등을 html 문서가 아닌 방법으로 추가하려고 합니다. 자바스크립트를 사용하여 노드를 추가할 수도 있겠지만 CSS를 사용할 수도 있습니다. CSS의 pseudo 선택자를 이용하면 됩니다.

# CSS pseudo 선택자 사용하여 콘텐츠 추가하기

콘텐츠를 추가할 엘리먼트를 ::after, ::before 선택자를 사용하여 추가합니다. 그리고 content 속성을 사용하여 원하는 콘텐츠 요소의 앞, 뒤에 특정 문장를 추가할 수 있습니다.

! 주의할 점

css 문서에 사용된 텍스트는 css 문서 인코딩을 따르므로 한글 등을 사용할 때 폰트가 깨져서 나타나는 문제가 발생할 수 있습니다. 이때는 css 인코딩 선언을 통해 utf-8 등을 사용해야 하니 꼭 알아두세요.

그럼 아래는 간단한 예제입니다. 먼저 test 클래스의 html 태그를 작성합니다.


@ ::before를 사용하여 앞에 콘텐츠 추가
만약 아래와 같이 클래스명 test 이전에 123 문구를 넣고 싶다면 다음과 같이 할 수 있습니다.

이제 실행하면 아래와 같이 123이 앞에 추가되어 나타납니다.


@ ::after를 사용하여 뒹 콘텐츠 추가하기
이번에도 비슷하지만 앞이 아닌 뒤에 123을 추가하려면 아래와 같습니다.

아래는 실행 결과입니다.


아래 역시 비슷한 예제입니다. 아래의 방법으로 속성값을 출력할 수도 있습니다.

html 태그 내용


실행 결과입니다.


그리고, 이미지도 삽입이 가능합니다. 하지만 별로 사용되지는 않습니다. 참고로 알아두세요.